<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:th='http://www.thymeleaf.org'>

<body>
<span th:replace="@{banner}"></span>
<div class="container-fluid">
    <span th:replace="@{nav}"></span>

    <div class="wrapper">
        <div class="wrapper_header">
            <span th:if="${not #lists.isEmpty(departments)}">
                <span id="department_group" th:each="department,departmentStat:${departments}">
                    <span th:if="${departmentStat.index} eq 0">
                        <label><input name="department" type="radio" checked="checked"
                                      th:text="${department.name}"></label>
                    </span>
                    <span th:if="${departmentStat.index} ne 0">
                        <label><input name="department" type="radio" th:text="${department.name}"></label>
                    </span>
                </span>
            </span>
        </div>

        <table id="warning_list" class="wrapper_inner table-bordered">
            <tr>
                <th>部门名称</th>
                <th>信号分类</th>
                <th>是否显示</th>
            </tr>
            <span th:if="not ${#lists.isEmpty(allWarnings)}">
                <span th:each="warning,warningStat:${allWarnings}">
                <tr>
                <td th:text="${departments.get(0).name}"></td>
                <td th:text="${warning.name}"></td>
                <td th:if="${#lists.contains(customNames,warning.name)}"><span th:data="${warning.id}"
                                                                               class="fa fa-minus-circle fa-2x"/></td>
                <td th:if="${not #lists.contains(customNames,warning.name)}"><span th:data="${warning.id}"
                                                                                   class="fa fa-plus-circle fa-2x"/></td>
                </tr>
                </span>
            </span>

        </table>
    </div>
</div>


<div class="md-modal" id="addDepartment_modal">
    <span class="md-close" style="position: absolute;right: 10px;top: 10px;cursor: pointer">X</span>
    <div class="md-content">
        <form id="department_form">
            <label>
                <span>部门名称:</span>
                <input name="name" type="text"/>
            </label>
            <label>
                <span>部门描述:</span>
                <input name="description" type="text"/>
            </label>
            <label id="alert" style="color:#fc6423;">
            </label>
            <div class="footer">
                <button class="btn btn-primary" type="button" onclick="addDepartment()">确定</button>
            </div>
        </form>
    </div>

</div>

<script type="text/javascript" th:src="@{/zs/assets/js/myModal.js}"></script>

<script>

    $('.system-nav li:eq(4)').addClass('choosed');

    $('#warning_list tr:nth-child(n+1)').each(function () {
        var $this = $(this);
        $this.find('td').eq(2).bind('click', function () {
            var $this2 = $(this);
            var department = $this.find('td').eq(0).text();
            var warningId = $this2.find('span').attr('data');
            var url;
            if ($this2.find('span').hasClass('fa-plus-circle')) {
                url = '/zs/warning/add/' + department + '/' + warningId;
                $.post(url, function (data, status) {
                    if (status == 'success') {
                        $this2.find('span').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                    } else {
                        alert('服务器异常，稍后再试');
                    }
                });
            } else {
                url = '/zs/warning/del/' + department + '/' + warningId;
                $.post(url, function (data, status) {
                    if (status == 'success') {
                        $this2.find('span').removeClass('fa-minus-circle').addClass('fa-plus-circle');
                    }
                    else {
                        alert('服务器异常，稍后再试');
                    }
                });

            }
        })
    })

    $("#department_group input[name='department']").change(function () {
        var department = $(this).parent().text();
        var url = '/zs/warning/get/' + department;
        $.post(url, function (data, status) {
            if (status == 'success') {
                $('#warning_list tr').each(function () {
                    var $this = $(this);
                    $this.find('td').eq(0).text(department);
                    if (data.contain($this.find('td').eq(1).text())) {
                        $this.find('td').eq(2).find('span').removeClass('fa-plus-circle').addClass('fa-minus-circle');
                    }
                    else {
                        $this.find('td').eq(2).find('span').removeClass('fa-minus-circle').addClass('fa-plus-circle');
                    }
                })
            }
        })
    });


</script>

</body>
</html>